<html>
<head><title>Game Chooser</title></head>
<body>

<script type="text/javascript"
src="https://www.google.com/jsapi?key=ABQIAAAAezlCDIPR94tIIKc9Bn1GXRR-qvrT2_zjIop2DGH6nDFrh2kU9xQ5FbnejqHQmA-igQdGlXjZt9sWHA"
></script>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"
></script>
<script type="text/javascript">
bgguser=""

function ChangeUser(user) {
  bgguser = user;
  UpdateFrame()
}

// This really handles all the magic from the form.
function UpdateFrame() {
  // first username. If blank, then we have nothing.
  var f = document.getElementById("gameframe");

  var user_text = document.getElementById("bgguser");
  var user_list = document.getElementById("bgguserlist");
  bgguser = ""
  if (user_text.value) {
    bgguser = user_text.value;
  } else if (user_list.value != "") {
    bgguser = user_list.value;
  }

  if (bgguser == "") {
    f.src = "";
    return;
  }

  var url = "/choose?" + "bgguser=" + bgguser;

  var best_with = document.getElementById("bestwith").value;
  if (best_with) {
    url = url + "&bestwith=" + best_with;
  }

  var rec_with = document.getElementById("recwith").value;
  if (rec_with) {
    url = url + "&recwith=" + rec_with;
  }

  var play_time = document.getElementById("playtime").value;
  if (play_time) {
    url = url + "&time=" + play_time;
  }

  var weight = document.getElementById("weight").value;
  if (weight) {
    url = url + "&weight=" + weight;
  }

  if (f.src != url) {
    f.src = url;
  }
}

function ClearNameText() {
  // clears the name input box selection.
  var user_text = document.getElementById("bgguser");
  user_text.value = "";
}

</script>

<table>
<tr><td>
<td>BGG User<br>
<form onsubmit="UpdateFrame(); return false;" method="NONE"><input type="text" name="bgguser" id="bgguser" width=20
   onclick="UpdateFrame();"><br>
 {{ user_control }}
</form>
<td>
Best with:
<select name="bestwith" id="bestwith" onChange="UpdateFrame();">
<option value="">any</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
<td>
Rec. with:
<select name="recwith" id="recwith" onChange="UpdateFrame();">
<option value="">any</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
<td>
Play Time:
<select name="playtime" id="playtime" onChange="UpdateFrame();">
<option value="">any</option>
<option value="5">5</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="30">30</option>
<option value="45">45</option>
<option value="60">60</option>
<option value="90">90</option>
`<option value="120">120</option>
<option value="180">180</option>
<option value="240">240</option>
</select>
<td>
Weight:
<select name="weight" id="weight" onChange="UpdateFrame();">
<option value="">any</option>
<option value="1">light</option>
<option value="2">light-medium</option>
<option value="3">medium</option>
<option value="4">medium-heavy</option>
<option value="5">heavy</option>
</select>
<td>
<input type="button" value="Go!" onclick="UpdateFrame();">

</table>

<iframe name="gameframe" id="gameframe"
  src="" width=100% height=500></iframe>

</body>
</html>
